<template>
  <div>
    <el-card class="song-group-box-card" :body-style="{ padding: 0 }" shadow="hover">
      <div class="song-group-img" @mouseover="getShow" @mouseleave="getHide">
        <el-image style="width: 100%; border-radius: 6px" :src="pic" alt="" @mousedown="goPlayList"></el-image>
        <!-- 播放量 -->
        <span class="el-icon-headset">{{ playCount | change }}</span>
        <!-- 添加淡入淡出效果 -->
        <transition name="el-fade-in-linear">
          <div class="el-icon-caret-right" style="font-size: 28px; color: #ec4141" v-show="show" @mousedown="goPlayList"></div>
        </transition>
      </div>
      <!-- 歌单名称 -->
      <p class="song-group-info" @mousedown="goPlayList">{{ name }}</p>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SongGroup',
  props: {
    id: {
      type: Number,
      required: true
    },
    name: {
      type: String,
      default: ''
    },
    pic: {
      type: String,
      default: ''
    },
    playCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 控制 el-icon-caret-right 的显示或隐藏
      show: false
    }
  },
  methods: {
    // 鼠标经过，显示 el-icon-caret-right
    getShow() {
      this.show = true
    },
    // 鼠标离开，隐藏 el-icon-caret-right
    getHide() {
      this.show = false
    },
    // 路由跳转到对应的歌单页面
    goPlayList() {
      this.$router.push({
        path: '/playlist',
        query: {
          id: this.id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.song-group-box-card {
  width: 206px;
  height: 255px;
  cursor: pointer;
  .song-group-img {
    position: relative;
    height: 206px;
    .el-icon-headset {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 12px;
      color: #fff;
    }
    .el-icon-caret-right {
      position: absolute;
      bottom: 5px;
      right: 5px;
      width: 28px;
      height: 28px;
      background-color: #fff;
      border-radius: 14px;
    }
  }
  .song-group-info {
    padding: 2px 5px;
    text-align: left;
  }
}
</style>
